<template>
  <section v-loading="list_loading">
  <div class="searchbox">
  <el-form inline :model="query"  class="demo-form-inline fl">
      <!-- 操作人 -->
      <el-form-item>
        <el-select size="medium" v-model="query.m" placeholder="功能模块">
          <el-option label="全部功能" value=""></el-option>
          <el-option label="用户" value="user"></el-option>
          <el-option label="套餐" value="taocan"></el-option>
          <el-option label="车辆" value="jx_bus"></el-option>
          <el-option label="教练" value="coach"></el-option>
          <el-option label="账户" value="administrator"></el-option>
          <el-option label="设置" value="setting"></el-option>
          <el-option label="考试" value="exam"></el-option>
          <el-option label="约车" value="yueche"></el-option>
          <el-option label="订单" value="order"></el-option>
        </el-select>
      </el-form-item>
      <!-- 操作类型下拉 -->
      <el-form-item>
      <el-select size="medium" v-model="query.type" placeholder="请选择操作类型">
        <el-option label="全部" value=""></el-option>
        <el-option label="创建" value="create"></el-option>
        <el-option label="登录" value="login"></el-option>
        <el-option label="更新" value="update"></el-option>
        <el-option label="删除" value="delete"></el-option>
      </el-select>
      </el-form-item>
      <!-- 搜索 -->
      <el-form-item>
        <el-button type="primary" size="small" icon="el-icon-search" @click.stop="doSearch">搜&nbsp;&nbsp;索</el-button>
      </el-form-item>
  </el-form>
  </div>
 <div @contextmenu="$parent.addMenu([{name:'刷新日志列表',method:'getData'}])">
      <el-table :data="listData" tooltip-effect="dark" highlight-current-row style="width: 100%;text-align:center" >
          <el-table-column prop="operation_name" label="操作人"></el-table-column>
          <el-table-column prop="time" label="操作时间">
              <template slot-scope="scope">{{ scope.row.time|date('Y-m-d H:i') }}</template>
          </el-table-column>
          <el-table-column prop="ip" label="IP"></el-table-column>
          <el-table-column label="操作类型">
              <template slot-scope="scope">{{ scope.row.type|op_type }}</template>
          </el-table-column>
          <el-table-column prop="beizhu" label="操作内容"></el-table-column>
      </el-table>
      <div class="breakpage" v-if="page.total>0">
        <el-pagination background layout="total,prev, pager, next"
            :total="parseInt(page.total)"
            :page-size="parseInt(page.pagesize)"
            :current-page="parseInt(page.curpage)"
            @current-change="pageChange">
        </el-pagination>
      </div>
</div>

  </section>
</template>
<script>
//引入请求借口;
import * as api from '../api/index'
import {date} from '../lib/function'
export default {
  data() {
      return {
        m:'log',
        query:{}
      }
  },
  computed:{
     listData(){
         return this.$store.state[this.m].data;
     },
     page(){
         return this.$store.state[this.m].page;
     },
     list_loading(){
         return this.$store.state[this.m].list_loading;
     }
   },
  filters:{
    date,
    op_type(d){
        switch(d){
          case 'create':return '创建';break;
          case 'update':return '更新';break;
          case 'delete':return '删除';break;
          case 'login':return '登录';break;
        }
    }
  },
  methods:{
    pageChange(p){
      this.query.p=p;
      this.getData();
    },
    doSearch(){
      this.query.p=1;
      this.getData();
    },
    getData(){
      this.$store.dispatch(
          this.m+'/getData',
        JSON.parse(JSON.stringify(this.query))
      );
    },
  },
  //生命周期函数;
  created(){
    if(this.$parent.school.current.id==undefined||this.$store.state[this.m].school_id!=this.$parent.school.current.id) {
      this.query={};
      this.getData();
      this.$store.commit(this.m+'/update',{type:'school_id',data:this.$parent.school.current.id});
    }else{
      this.query=JSON.parse(JSON.stringify(this.$store.state[this.m].query));
    }
  }
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {transition: opacity .5s}
.fade-enter, .fade-leave-to{opacity: 0}
</style>
